<template>
  <div>
    <el-card>
<el-form ref="formref">
  <el-row>
    <el-col :span="8">
<el-form-item label="运输任务编号：" label-width="120px">
  <el-input v-model="transportTaskId"/>
</el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="起始地机构：" label-width="120px">
        <TreeSelect
          v-model="page.startAgencyId"
          :normalizer="normalizer"
          :options="treeData"
          placeholder="请选择起始地机构"
          :appendToBody="true"
        />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="目的地机构：" label-width="120px">
        <TreeSelect
          v-model="page.endAgencyId"
          :normalizer="normalizer"
          :options="treeData"
          placeholder="请选择目的地机构"
          :appendToBody="true"
        />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="10">
<el-form-item label="回车时间：">
  <el-date-picker
    v-model="value2"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    align="right">
  </el-date-picker>
</el-form-item>
    </el-col>
    <el-col :span="9">
      <el-form-item label="车辆是否可用：">
<el-select placeholder="请选择" v-model="isAvailable">
  <el-option
  v-for="item in options"
  :key="item.value"
  :label="item.label"
  :value="item.value"
  />
</el-select>
      </el-form-item>
    </el-col>
<!--    button按钮-->
    <el-col :span="5">
      <el-button type="danger" @click="submit">搜索</el-button>
      <el-button @click="onreset">重置</el-button>
    </el-col>
  </el-row>
</el-form>
</el-card>
    <el-card>
      <el-table :data="datalist">
        <el-table-column label="运输任务编号" prop="transportTaskId"/>
        <el-table-column label="起始地机构" prop="startAgencyName"/>
        <el-table-column label="目的地机构" prop="endAgencyName"/>
        <el-table-column label="运单数量" prop="transportOrderNumber"/>
        <el-table-column label="出车时间" prop="outStorageTime"/>
        <el-table-column label="回车时间" prop="intoStorageTime"/>
        <el-table-column label="车牌号码" prop="licensePlate"/>
        <el-table-column label="车辆是否可用" prop="isAvailable">
          <template #default="{row}">
<!--            <el-row>{{row}}</el-row>-->
            <el-row type="flex" style="width: 70px" align="middle"  v-if="row.isAvailable===true">
              <el-col> <div style="width: 10px;height: 10px;border-radius: 50%;background-color: aquamarine "/></el-col>
              <el-col>正常</el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
<!--            <el-row>{{row}}</el-row>-->
            <el-button type="text" @click="carregisterinfo(row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>

import { getCarRegisterDetailApi } from '@/api/carregister'

import { GetListApi } from '@/api/instiution'
// import the component
import TreeSelect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  // register the component
  components: { TreeSelect },
  name: 'carregister',
  data () {
    return {
      value2: '',
      selevalue: '',
      options: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 'true',
          label: '可用'
        },
        {
          value: 'false',
          label: '不可用'
        }
      ],
      datalist: [],
      data: [],
      page: {
        intoStorageEndTime: '',
        intoStorageStartTime: '',
        isAvailable: '',
        page: 1,
        pageSize: 10,
        startAgencyId: null,
        transportTaskId: null,
        endAgencyId: null
      },
      arr1: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      transportTaskId: '',
      isAvailable: '',
      treeData: []

    }
  },
  created () {
    this.gettree()
    this.getCarRegisterDetail()
  },
  methods: {
    async getCarRegisterDetail () {
      const res = await getCarRegisterDetailApi(this.page)
      console.log(res)
      this.datalist = res.data.items
    },
    // 处理树形
    async gettree () {
      const res = await GetListApi()
      console.log(res)
      this.data = JSON.parse(res.data)
      this.arr1 = this.data
      this.treeData = this.data
      console.log(this.treeData)
    },
    // 点击跳转路由页面
    carregisterinfo (id) {
      console.log(id)
      this.$router.push({
        path: '/transit/car-register-info',
        query: { id }
      })
    },
    handleNodeClick (data, b, c) {
      console.log(data)
      // console.log(b)
      // console.log(c)
    },
    // 搜索功能
    async submit () {
      const res = await getCarRegisterDetailApi({
        endAgencyId: this.page.endAgencyId,
        transportTaskId: this.transportTaskId,
        startAgencyId: this.page.startAgencyId,
        isAvailable: this.isAvailable,
        page: this.page.page,
        pageSize: this.page.pageSize

      })
      console.log(res)
      this.datalist = res.data.items
    },
    // 重置功能
    onreset () {
      this.transportTaskId = ''
      this.isAvailable = ''
      this.page.startAgencyId = ''
      this.page.endAgencyId = ''
      this.page.intoStorageEndTime = ''
      this.page.intoStorageStartTime = ''
      this.$refs.formref.resetFields()
      this.getCarRegisterDetail()
    },
    normalizer (node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    }
  }
}
</script>
